@charset "UTF-8";

html{
    font-family: "微软雅黑";
}

@rex : 1/(100rem); 

body {
    font-family:"微软雅黑",arial,Helvetica Neue,Helvetica,STHeiTi,sans-serif;
    color: #333;
    background-color: #f4f4f4;
    overflow-x: hidden;
    font-size: 16*@rex;
}
a {
    color: #333;
    text-decoration: none
}

a:focus,a:hover {
    color: #333;
}
.hidden{
    visibility:hidden;
}
.f-r{float: right;}
.f-l{float: left;}
.t-l{text-align: left !important;}
.t-c{text-align: center;}
html{
    height: 100%;
}
.tw-zdcym{
    position: relative;
    width: 100%;
    height: 100%;
    .tw-head{
        height: 82*@rex;
        background: #10a5d1;
        line-height: 82*@rex;
        text-align: center;
        .title{
            font-size: 36*@rex;
            color: #fff;
        }
    }
    .tw-map-box{
        position: absolute;
        top: 82*@rex;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .tw-banner{
        height: 400*@rex;
        .wrap{
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
            .tempWrap{
                height: 100%;
                .bd{
                    height: 100%;
                    a{
                        float: left;
                        display: block;
                        width: 100%;
                        height: 100%;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            .hdbox{
                height: 65*@rex;
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 1;
                .bg{
                    background: #000000;
                    -webkit-opacity: 0.7;
                    opacity: 0.7;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 2;
                }
                .title{
                    z-index: 3;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 75%;
                    height: 100%;
                    padding: 0 24*@rex;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-wrap: normal;
                    white-space: nowrap;
                    color: #fff;
                    font-size: 24*@rex;
                    line-height: 65*@rex;
                }
                .title a{
                    display: block;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-wrap: normal;
                    white-space: nowrap;
                    color: #fff;
                    font-size: 24*@rex;
                    line-height: 65*@rex;
                }
                .hd{
                    z-index: 4;
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 25%;
                    height: 100%;
                    text-align: center;
                    li{
                        float: left;
                        margin: 0 5*@rex;
                        span{
                            color: #e8f0f3;
                            font-size: 30*@rex;
                            line-height: 65*@rex;
                        }
                        &.on span{
                            color: #fec00b;
                        }
                    }
                }
            }
        }
    }
    .tw-module{
        .fenge{
            height: 16*@rex;
            background: #f4f4f4;
        }
        .title{
            height: 64*@rex;
            background: #f4f4f4;
            border-top:1px solid #ddd;
            border-bottom:1px solid #ddd;
            padding: 0 20*@rex 0 36*@rex;
            font-size: 0;
            span{
                line-height: 64*@rex;
                font-size: 24*@rex;
                font-weight: bold;
                color: #000;
                display: inline-block;
                zoom: 1;
                width: 80%;
                overflow: hidden;
                text-overflow: ellipsis;
                word-wrap: normal;
                white-space: nowrap;
                &.date{
                    width: auto;
                    min-width: 90*@rex;
                    max-width: 20%;
                    background: #10a5d1;
                    color: #fff;
                    text-align: center;
                    height: 36*@rex;
                    line-height: 42*@rex;
                    font-size: 22*@rex;
                    font-weight: normal;
                    -webkit-border-radius: 2px;
                    -moz-border-radius: 2px;
                    border-radius: 2px;
                    vertical-align: top;
                    margin-top: 12*@rex;
                    float: right;
                }
            }
        }
        .content{
            background: #fff;
        }
    }
    
    .tw-module .content{
        #chart{
            height: 326*@rex;
            width: 100%;
            border-bottom: 1px solid #ddd;
        }
        #history{
            min-height: 100*@rex;
            //max-height: 536*@rex;
            overflow-x: hidden;
            //overflow-y: auto;
            width: 100%;
            border-bottom: 1px solid #ddd;
            padding: 24*@rex 20*@rex 20*@rex 36*@rex;
            .wrap{
                width: 100%;
                border-left: 1px solid #10A5D1;
                position: relative;
                .item{
                    width: 95%;
                    margin-left: 5%;
                    min-height: 56*@rex;
                    padding: 22*@rex 0 20*@rex 0;
                    border-bottom: 1px solid #ddd;
                    position: relative;
                    span.point{
                        background: #fff;
                        width: 12*@rex;
                        height: 12*@rex;
                        -webkit-border-radius: 50%;
                        -moz-border-radius: 50%;
                        border-radius: 50%;
                        border: 1px solid #10A5D1;
                        font-size: 12*@rex;
                        position: absolute;
                        left: -5.263%;
                        top: 12*@rex;
                        margin-left: -6.5*@rex;
                    }
                    span.new{
                        height: 24*@rex;
                        line-height: 24*@rex;
                        color: #fff;
                        background: #fa6667;
                        -webkit-border-radius: 2px;
                        -moz-border-radius: 2px;
                        border-radius: 2px;
                        font-size: 16*@rex;
                        position: absolute;
                        left: 0;
                        bottom:-24*@rex;
                        margin-top: 2*@rex;
                        padding: 0 4*@rex;
                    }
                    .time{
                        font-size: 20*@rex;
                        width: 20%;
                        position: relative;
                    }
                    .tit{
                        font-size: 22*@rex;
                        width: 80%;
                        line-height: 26*@rex;
                    }
                }
            }
        }
        #paiming{
            height: 326*@rex;
            width: 100%;
            border-bottom: 1px solid #ddd;
            table{
                width: 100%;
                height: 100%;
                tr{
                    th{
                        text-align: center;
                        height: 54*@rex;  
                        line-height: 54*@rex;
                        font-size: 18*@rex;
                        color: #10A5D1;
                        font-weight: normal;
                        border-right: 1px solid #ddd;
                        border-bottom: 1px solid #ddd;
                        &.last{
                            border-right: 0;
                        }
                    }
                    td{
                        border-right: 1px solid #ddd;
                        text-align: center;
                        vertical-align: middle;
                        font-size: 22*@rex;
                        &.last{
                            border-right: 0;
                        }
                        >span{
                            width: 32*@rex;
                            height: 32*@rex;
                            display: inline-block;
                            text-align: center;
                            line-height: 32*@rex;
                            background: #ddd;
                            -webkit-border-radius: 3px;
                            -moz-border-radius: 3px;
                            border-radius: 3px;
                            color: #fff;
                            font-size: 20*@rex;
                            vertical-align: middle;
                        }
                        >div{
                            width: 370*@rex;
                            margin: auto;
                            a{
                                display: block;
                                height: 32*@rex;
                                line-height: 32*@rex;
                                max-width: 100%;
                                padding: 0 10*@rex;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                word-wrap: normal;
                                white-space: nowrap;
                                font-size: 24*@rex;
                                vertical-align: middle;
                            }
                        }
                    }
                }
            }
        }
        #build-status{
            height: 360*@rex;
            width: 100%;
            border-bottom: 1px solid #ddd;
            padding: 0 20*@rex;
            .layout-item{
                height: 170*@rex;
                border-bottom: 1px dashed #10a5d1;
                padding: 16*@rex 0 14*@rex 0;
                .num-detail{
                    width: 50%;
                    height: 100%;
                    position: relative;
                    .nd-bg{
                        width: 116*@rex;
                        height: 116*@rex;
                        -webkit-border-radius: 50%;
                        -moz-border-radius: 50%;
                        border-radius: 50%; 
                        background: #f2faff;
                        border: 1px solid #10A5D1;
                        position: absolute;
                        bottom: 0;
                        left: 16*@rex;
                        z-index: 1;
                        .txt1{
                            position: absolute;
                            width: 100%;
                            height: 50%;
                            top: 0;
                            left: 0;
                            text-align: center;
                            font-size: 30*@rex;
                            color: #fa6667;
                            line-height: 76*@rex;
                            z-index: 3;
                        }
                        .txt2{
                            position: absolute;
                            width: 100%;
                            height: 50%;
                            bottom: 0;
                            left: 0;
                            text-align: center;
                            font-size: 18*@rex;
                            z-index: 3;
                        }
                        .tixing{
                            position: absolute;
                            z-index: -1;
                            width: 90*@rex;
                            height: 57*@rex;
                            background: url(../img/tixing-bg.png) no-repeat center;
                            background-size: 100% 100%;
                            left: 100%;
                            top: 0;
                            margin-left: -2*@rex;
                            .jhtz{
                                position: absolute;
                                right: 0;
                                top: -28*@rex;
                                font-size: 16*@rex;
                                color: #666;
                                word-break: keep-all;
                            }
                            .ljtz{
                                position: absolute;
                                right: 0;
                                bottom: 8*@rex;
                                font-size: 16*@rex;
                                color: #666;
                                word-break: keep-all;
                            }
                            .jhtz-num{
                                position: absolute;
                                left: 100%;
                                margin-left:10*@rex;
                                top: -28*@rex;
                                font-size: 22*@rex;
                                color: #fff;
                                background: #78cb97;
                                word-break: keep-all;
                                padding: 8*@rex 20*@rex;
                                -webkit-border-radius: 3px;
                                -moz-border-radius: 3px;
                                border-radius: 3px;
                            }
                            .ljtz-num{
                                position: absolute;
                                left: 100%;
                                margin-left:10*@rex;
                                bottom: -8*@rex;
                                font-size: 22*@rex;
                                color: #fff;
                                background: #e28eae;
                                word-break: keep-all;
                                padding: 8*@rex 20*@rex;
                                -webkit-border-radius: 3px;
                                -moz-border-radius: 3px;
                                border-radius: 3px;
                            }
                        }
                    }
                }
                .text-detail{
                    width: 50%;
                    height: 100%;
                    overflow: auto;
                    p{
                        font-size: 22*@rex;
                        color: #666;
                        line-height: 26*@rex;
                    }
                }
            }
            .layout-item-block{
                padding: 18*@rex 0*@rex 0 0*@rex;
                .flex-row {
                    flex-wrap:wrap;
                    .flex-row-item-b{
                        width: 30%;
                        height: 66*@rex;
                        margin: 5*@rex 1.5%;
                        -webkit-border-radius: 2px;
                        -moz-border-radius: 2px;
                        border-radius: 2px;
                        line-height: 66*@rex;
                        text-align: center;
                        span{
                            font-size: 22*@rex;
                        }
                        .num{
                            font-size: 22*@rex;
                        }
                    }
                    .sgxk{
                        background: #e5f5ea;
                        border: 1px solid #7ecd9c;
                        span.num, span.line{
                            color: #7ecd9c;
                        }
                    }
                    .lxsp{
                        background: #fff9f1;
                        border: 1px solid #f1d0a5;
                        span.num, span.line{
                            color: #f1d0a5;
                        }
                    }
                    .ghsp{
                        background: #e8eff8;
                        border: 1px solid #9dc0f1;
                        span.num, span.line{
                            color: #9dc0f1;
                        }
                    }
                    .jgys{
                        background: #e5ffff;
                        border: 1px solid #85dfde;
                        span.num, span.line{
                            color: #85dfde;
                        }
                    }
                    .xyxt{
                        background: #fceded;
                        border: 1px solid #f4b3b3;
                        span.num, span.line{
                            color: #f4b3b3;
                        }
                    }
                }
            }
        }
    }
}
#tw-content{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 120*@rex;
    overflow-x: hidden;
    overflow-y: auto;
}
#tw-menu{
    height: 120*@rex;
    position: fixed;
    left: 0;
    right: 0;
    border-top: 1px solid #ddd;
    bottom: 0;
    background: #fff;
    z-index: 98;
    a{
        span{
            display: block;
            text-align: center;
            color: #929292;
            &.fa{
                font-size: 54*@rex;
                margin-top: 18*@rex;
            }
            &.txt{
                margin-top: 6*@rex;
                font-size: 30*@rex;
                color: #646464;
            }
        }
        &.on span{
            color: #10A5D1;
        }
    }
}

#chart-font-size{
    font-size: 16*@rex;
}
